<template>
  <div class="home-header">
    <div class="title" @click="$router.push('/cache')" v-if="false">
      {{ home.app_name }}
    </div>
    <div class="search" @click="$router.push('/search')">
      <span class="icon"></span>
      <span class="text">输入您想要搜索的内容 ...</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: ['home']
}
</script>

<style scoped lang="stylus">
.home-header
  display flex
  justify-content space-between
  height 42px
  padding 10px 15px
  margin-top -500px
  margin-bottom 5px
  //background #fcfcfc
  .title
    //color #333
    color white
    font-weight 700
    font-size $max_size
    padding-right 22px
    margin-top 7.5px
    letter-spacing 2px
  .search
    flex 1
    height 40px
    line-height 40px
    border-radius 20px
    border 1px solid white
    background white
    display flex
    .icon
      width 20px
      margin 7.5px 2.5px 7.5px 7.5px
      background-image url("../images/search-icon.png")
      background-size contain
      background-repeat no-repeat
    .text
      color #808080
</style>
